<template>
  <div class="summary-one">
    <el-collapse v-model="activeTop" :accordion="false">
      <el-collapse-item title="预警汇总图" name="1">
        <div class="top-wrapper">
          <div class="left">
            <div class="card-title">预警总数</div>
            <div class="status">
              <!--  -->
              <div class="status-item">
                <div class="icon-wrapper">
                  <i class="el-icon-files"></i>
                </div>
                <div class="title">红色预警</div>
                <div class="num">{{ summary.red }}</div>
              </div>
              <!--  -->
              <div class="status-item">
                <div class="icon-wrapper">
                  <i class="el-icon-files"></i>
                </div>
                <div class="title">黄色一级</div>
                <div class="num">{{ summary.level1 }}</div>
              </div>
              <!--  -->
              <div class="status-item">
                <div class="icon-wrapper">
                  <i class="el-icon-files"></i>
                </div>
                <div class="title">黄色二级</div>
                <div class="num">{{ summary.level2 }}</div>
              </div>
              <!--  -->
              <div class="status-item">
                <div class="icon-wrapper">
                  <i class="el-icon-files"></i>
                </div>
                <div class="title">已交办</div>
                <div class="num">{{ summary.done }}</div>
              </div>
              <!--  -->
              <div class="status-item">
                <div class="icon-wrapper">
                  <i class="el-icon-files"></i>
                </div>
                <div class="title">未处理</div>
                <div class="num">{{ summary.undo }}</div>
              </div>
            </div>
          </div>
          <div class="right">
            <div class="card-title">预警占比</div>
            <div class="chart-wrapper">
              <div id="chart"></div>
            </div>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
    <div class="bottom">
      <el-collapse v-model="activeList" :accordion="false">
        <el-collapse-item title="预警统计表" name="1">
          <div class="type-group">
            <div id="dept" @click="typeChange('dept')">按部门</div>
            <div id="project" @click="typeChange('project')">按项目</div>
            <div id="point" @click="typeChange('point')">按预警点</div>
          </div>
          <div class="list-wrapper">
            <div v-if="showList == 'dept'" class="list by-dept">
              <el-table :data="dataByDept" border stripe>
                <el-table-column
                  v-for="(col, index) in colByDept"
                  :key="index"
                  :prop="col.prop"
                  :label="col.label"
                  :width="col.width"
                  :min-width="col.minWidth"
                  :align="col.align || 'center'"
                >
                </el-table-column>
              </el-table>
            </div>
            <div v-if="showList == 'point'" class="list by-point">
              <el-table :data="dataByPoint" border stripe>
                <el-table-column
                  v-for="(col, index) in colByPoint"
                  :key="index"
                  :prop="col.prop"
                  :label="col.label"
                  :width="col.width"
                  :min-width="col.minWidth"
                  :align="col.align || 'center'"
                >
                </el-table-column>
              </el-table>
            </div>
            <div v-if="showList == 'project'" class="list by-project">
              <el-table :data="dataByProject" border stripe>
                <el-table-column
                  v-for="(col, index) in colByProject"
                  :key="index"
                  :prop="col.prop"
                  :label="col.label"
                  :width="col.width"
                  :min-width="col.minWidth"
                  :align="col.align || 'center'"
                >
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
import {
  getDeptRank,
  getPointRank,
  getProjectRank,
  getSummaryByOne,
} from "@/api/AlertSummary/Index";
export default {
  data() {
    return {
      activeTop: ["1"],
      activeList: ["1"],
      showList: "dept",
      colByDept: colByDept,
      colByPoint: colByPoint,
      colByProject: colByProject,
      dataByDept: [],
      dataByPoint: [],
      dataByProject: [],
      summary: {
        red: 0,
        level1: 0,
        level2: 0,
        undo: 0,
        done: 0,
      },
      chart: null,
    };
  },
  methods: {
    initData(type) {
      switch (type) {
        case "dept":
          this.initByDept();
          break;
        case "point":
          this.initByPoint();
          break;
        case "project":
          this.initByProject();
          break;
        default:
          this.initByDept();
          break;
      }
    },
    initByDept() {
      getDeptRank().then((res) => {
        if (res.code == 0) {
          this.dataByDept = res.data;
        }
      });
    },
    initByPoint() {
      getPointRank().then((res) => {
        if (res.code == 0) {
          this.dataByPoint = res.data;
        }
      });
    },
    initByProject() {
      getProjectRank().then((res) => {
        if (res.code == 0) {
          this.dataByProject = res.data;
        }
      });
    },
    typeChange(type) {
      const active = "active-list";
      let domDept = document.getElementById("dept");
      let domProject = document.getElementById("project");
      let domPoint = document.getElementById("point");

      domDept.classList.remove(active);
      domProject.classList.remove(active);
      domPoint.classList.remove(active);

      switch (type) {
        case "dept":
          domDept.classList.add(active);
          break;
        case "point":
          domPoint.classList.add(active);
          break;
        case "project":
          domProject.classList.add(active);
          break;
      }

      this.showList = type;

      this.initData(type);
    },
    initByOne() {
      getSummaryByOne().then((res) => {
        if (res.code == 0) {
          this.summary.red = res.data[0].redNum;
          this.summary.level1 = res.data[0].yellowNum1;
          this.summary.level2 = res.data[0].yellowNum2;
          this.summary.undo = res.data[0].num1;
          this.summary.done = res.data[0].num2;
        }

        this.setOption();
      });
    },
    setOption() {
      let option = {
        tooltip: {
          trigger: "item",
        },
        grid: {
          top: "5%",
          left: "3%",
          right: "4%",
          bottom: "1%",
          containLabel: true,
        },
        series: [
          {
            type: "pie",
            radius: "50%",
            center: ["25%", "50%"],
            data: [
              {
                value: this.summary.red,
                name: "红色预警",
                itemStyle: {
                  color: "rgb(243, 73, 68)",
                },
              },
              {
                value: this.summary.level1,
                name: "黄色一级",
                itemStyle: {
                  color: "rgb(244, 203, 49)",
                },
              },
              {
                value: this.summary.level2,
                name: "黄色二级",
                itemStyle: {
                  color: "rgb(46, 168, 228)",
                },
              },
            ],
          },
          {
            type: "pie",
            radius: "50%",
            center: ["75%", "50%"],
            data: [
              {
                value: this.summary.done,
                name: "已处理",
                itemStyle: {
                  color: "rgb(102, 97, 217)",
                },
              },
              {
                value: this.summary.undo,
                name: "未处理",
                itemStyle: {
                  color: "rgb(147, 95, 233)",
                },
              },
            ],
          },
        ],
      };

      option && this.chart.setOption(option);
    },
  },
  created() {
    this.initData();
    this.initByOne();
  },
  mounted() {
    this.typeChange(this.showList);
    let dom = document.getElementById("chart");
    this.chart = this.$echarts.init(dom);
  },
};

const colByDept = [
  {
    prop: "name",
    label: "部门名称",
    width: "",
    minWidth: "300",
    align: "",
  },
  {
    prop: "num",
    label: "预警总数",
    width: "150",
    minWidth: "",
    align: "",
  },
  {
    prop: "num4",
    label: "红色预警",
    width: "150",
    minWidth: "",
    align: "",
  },
  {
    prop: "num2",
    label: "一级预警",
    width: "150",
    minWidth: "",
    align: "",
  },
  {
    prop: "num3",
    label: "二级预警",
    width: "150",
    minWidth: "",
    align: "",
  },
];

const colByPoint = [
  {
    prop: "name",
    label: "预警点名称",
    width: "",
    minWidth: "300",
    align: "",
  },
  {
    prop: "num",
    label: "预警总数",
    width: "150",
    minWidth: "",
    align: "",
  },
  {
    prop: "num4",
    label: "红色预警",
    width: "150",
    minWidth: "",
    align: "",
  },
  {
    prop: "num2",
    label: "一级预警",
    width: "150",
    minWidth: "",
    align: "",
  },
  {
    prop: "num3",
    label: "二级预警",
    width: "150",
    minWidth: "",
    align: "",
  },
];

const colByProject = [
  {
    prop: "name",
    label: "项目名称",
    width: "",
    minWidth: "300",
    align: "",
  },
  {
    prop: "num",
    label: "预警总数",
    width: "150",
    minWidth: "",
    align: "",
  },
  {
    prop: "num4",
    label: "红色预警",
    width: "150",
    minWidth: "",
    align: "",
  },
  {
    prop: "num2",
    label: "一级预警",
    width: "150",
    minWidth: "",
    align: "",
  },
  {
    prop: "num3",
    label: "二级预警",
    width: "150",
    minWidth: "",
    align: "",
  },
];
</script>

<style lang="scss" scoped>
$btn-color: rgba(49, 111, 234, 1);
.summary-one {
}

.top-wrapper {
  width: 100%;
  display: flex;
  > .left {
    width: 40%;
  }
  > .right {
    width: 60%;
  }
}

$color-red: rgb(243, 73, 68);
$color-level1: rgb(244, 203, 49);
$color-level2: rgb(46, 168, 228);
$color-undo: rgb(147, 95, 233);
$color-done: rgb(102, 97, 217);

.status {
  display: flex;
  width: 100%;
  flex: 0;
  flex-wrap: wrap;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 10px;
}

.status-item {
  margin-top: 10px;
  width: 49%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  padding: 10px 0;
  .icon-wrapper {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: #fff;
    border-radius: 5px;
  }
  > .title {
    font-size: 16px;
    font-weight: 600;
  }
  > .num {
    font-size: 16px;
    font-weight: 600;
  }
  &:first-child {
    width: 100%;
    > .icon-wrapper {
      background-color: $color-red;
    }
    > .num {
      color: $color-red;
    }
  }
  &:nth-child(2) {
    > .icon-wrapper {
      background-color: $color-level1;
    }
    > .num {
      color: $color-level1;
    }
  }
  &:nth-child(3) {
    > .icon-wrapper {
      background-color: $color-level2;
    }
    > .num {
      color: $color-level2;
    }
  }
  &:nth-child(4) {
    > .icon-wrapper {
      background-color: $color-undo;
    }
    > .num {
      color: $color-undo;
    }
  }
  &:nth-child(5) {
    > .icon-wrapper {
      background-color: $color-done;
    }
    > .num {
      color: $color-done;
    }
  }
}

.card-title {
  box-sizing: border-box;
  padding-left: 20px;
  height: 30px;
  line-height: 30px;
  border-left: 5px solid $btn-color;
  font-size: 18px;
  font-weight: 600;
}

.bottom {
  margin-top: 20px;
}

.type-group {
  position: sticky;
  display: flex;
  div {
    width: 100px;
    height: 30px;
    line-height: 30px;
    font-weight: 600;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
    &:nth-child(1) {
      border-right: 1px solid $btn-color;
    }
    &:nth-child(2) {
      border-right: 1px solid $btn-color;
    }
  }
}
.list-wrapper {
  margin-top: 20px;
  .list {
    height: 100%;
  }
}

.active-list {
  background-color: $btn-color;
  color: #fff;
}

.chart-wrapper {
  height: 200px;
  #chart {
    height: 100%;
  }
}
</style>
